<template>
  <div>
    
    <van-empty v-if="arr.length == 0" description="购物车空空如也" />
    <!-- 展示数据 -->
    <div class="con">
      <div class="item" v-for="item in arr" :key="item.id">
        <van-checkbox
          v-model="item.checked"
          checked-color="#ee0a24"
          @change="changeOne"
        ></van-checkbox>
        <van-swipe-cell>
          <van-card
            :title="item.goodsname"
            class="goods-card"
            :thumb="$pre + item.img"
          >
            <!-- 数量插槽 -->
            <div slot="num">
              <van-stepper
                v-model="item.num"
                @plus="plus(item.id)"
                @minus="sub(item.id)"
              />
            </div>
            <div slot="desc">{{ item.price | filterPrice }}</div>
            <div slot="price">¥{{ (item.price * item.num) | filterPrice }}</div>
          </van-card>
          <!-- 删除 -->
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="del(item.id)"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <!-- 结算 -->
    <van-submit-bar
      :price="allPrice * 100"
      :button-text="`去结算(${select_num})件`"
      @submit="onSubmit"
    >
      <van-checkbox
        v-model="allChecked"
        checked-color="#ff4400"
        @click="changeAll"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script>
import { reqcartlist, reqcartedit, reqcartdel } from "../../http/http";
import { Toast } from "vant";
export default {
  data() {
    return {
      // 初始化购物车数据
      arr: [],
      allChecked: false,
    };
  },
  mounted() {
    // 发请求，获取购物车数据
    this.init();
  },
  methods: {
    init() {
      reqcartlist({
        uid: JSON.parse(localStorage.getItem("isLogin")).uid,
      }).then((res) => {
        let list = res.data.list ? res.data.list : [];
        // 补checked属性
        list.forEach((item) => {
           let obj = this.arr.find((i) => i.id === item.id); //{} undefined
           console.log();
          item.checked = obj ? obj.checked : false;
        });
        this.arr = list;
        //修改全选的状态
        this.allChecked =
          this.arr.length > 0 ? this.arr.every((item) => item.checked) : false;
      });
    },
    // 4.数量加
    plus(id) {
      reqcartedit({
        id: id,
        type: 2,
      }).then((res) => {
        if (res.data.code == 200) {
          Toast(res.data.msg);
          this.init();
        }
      });
    },
    // 5.数量 -
    sub(id) {
      reqcartedit({
        id: id,
        type: 1,
      }).then((res) => {
        if (res.data.code == 200) {
          Toast(res.data.msg);
          this.init();
        }
      });
    },
    // 6.删除
    del(id) {
      reqcartdel({ id: id }).then((res) => {
        if (res.data.code == 200) {
          Toast(res.data.msg);
          this.init();
        }
      });
    },
    //7.点了全选
    changeAll() {
      this.arr.forEach((item) => (item.checked = this.allChecked));
    },
    // 8.修改了某一个的状态
    changeOne() {
      this.allChecked = this.arr.every((item) => item.checked);
    },
    // 12.结算
    onSubmit() {
      let obj = {
        countmoney: this.allPrice,
        countnumber: this.select_num,
        idstr: this.arr
          .filter((item) => item.checked)
          .map((item) => item.id)
          .join(","),
      };
      console.log(obj);
      sessionStorage.setItem("toOrderInfo", JSON.stringify(obj));
      // 跳转到确认订单页
      this.$router.push("/order");
    },
  },
  computed: {
    //10.总价
    allPrice() {
      return this.arr.reduce(
        (val, item) => (item.checked ? val + item.price * item.num : val),
        0
      );
    },
    // 11.选中的数量
    select_num() {
      return this.arr.reduce(
        (val, item) => (item.checked ? val + item.num : val),
        0
      );
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../less/index.less";
.van-submit-bar {
  bottom: calc(@footerHeight + 1px);
  border-top: 0.01rem solid #ccc;
}
.con {
  height: calc(100vh-@footerHeight - @footerHeight - 0.54rem);
  overflow-y: auto;
  .item {
    display: flex;
    background-color: #fafafa;
    .van-checkbox {
      width: 1rem;
      justify-content: center;
    }
    .van-swipe-cell {
      flex: 1;
    }
  }
}
</style>